<template>
  <div class="skeleton">
    <a-skeleton
      :width="width"
      active
      :paragraph="{
        rows,
        width: '100%'
      }"
      :title="{
        width: '40%'
      }"
    />
  </div>
</template>

<script>
export default {
  name: 'Skeleton',
  props: {
    rows: {
      type: Number,
      default: () => 3
    },
    width: {
      type: Number,
      default: () => 60
    }
  }
};
</script>

<style lang='scss' scoped>
.skeleton{
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 24px;
  left: 0;
  z-index: 33;
  padding: 20px;
  /deep/ .ant-skeleton-content .ant-skeleton-paragraph > li,
  /deep/ .ant-skeleton-content .ant-skeleton-title
  {
    height: 35px;
    border-radius: 8px;
  }
}
</style>
